<template>
  <div class="container">
    <!--搜索表单-->
    <div class="search-container">
      <el-form :inline="true" :model="searchLog" class="search-form" size="small">
        <el-form-item label="用户名称">
          <el-input
            v-model="searchLog.userName"
            placeholder="用户名称"
            clearable
          />
        </el-form-item>
        <el-form-item label="操作类型">
          <el-input
            v-model="searchLog.operationType"
            placeholder="操作类型"
            clearable
          />
        </el-form-item>
        <el-form-item label="状态">
          <el-select
            v-model="searchLog.operationStatus"
            placeholder="选择状态"
            clearable
          >
            <el-option label="全部" value="" />
            <el-option label="成功" value="成功" />
            <el-option label="失败" value="失败" />
          </el-select>
        </el-form-item>
        <el-form-item label="时间范围">
          <el-date-picker
            v-model="operationTime"
            type="daterange"
            range-separator="~"
            start-placeholder="开始"
            end-placeholder="结束"
            value-format="yyyy-MM-dd"
            clearable
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="small" @click="onSubmit">查询</el-button>
          <el-button icon="el-icon-refresh-right" size="small" @click="clear">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 操作按钮 -->
    <div class="brand-container">
      <div class="title-container">
        <span>日志列表</span>
      </div>
      <div class="button-group-container">
        <el-button type="success" icon="el-icon-download" size="small" @click="exportData">导出</el-button>
        <el-button icon="el-icon-refresh" size="small" @click="getLogList">刷新</el-button>
      </div>
      <div class="align-right">
        <span class="total-info">共 <em>{{ total }}</em> 条记录</span>
      </div>
    </div>

    <!-- 数据表格 -->
    <div class="table-container">
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        border
        v-loading="loading"
      >
        <el-table-column prop="id" label="序号" width="80" align="center" />
        <el-table-column prop="userName" label="用户名称" width="120" align="center">
          <template slot-scope="scope">
            <el-tag size="small" type="info">{{ scope.row.userName || '-' }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="operationType" label="操作类型" width="120" align="center">
          <template slot-scope="scope">
            <el-tag size="small" :type="getOperationTypeColor(scope.row.operationType)">
              {{ scope.row.operationType || '-' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="operationMethod" label="请求方法" width="100" align="center">
          <template slot-scope="scope">
            <el-tag size="small" :type="getRequestMethodColor(scope.row.operationMethod)">
              {{ scope.row.operationMethod || '-' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="requestUrl" label="请求URL" min-width="200" show-overflow-tooltip>
          <template slot-scope="scope">
            <span class="url-text">{{ scope.row.requestUrl || '-' }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="operationIp" label="操作IP" width="140" align="center">
          <template slot-scope="scope">
            <span class="ip-text">{{ scope.row.operationIp || '-' }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="operationStatus" label="操作状态" width="100" align="center">
          <template slot-scope="scope">
            <el-tag
              :type="scope.row.operationStatus === '成功' ? 'success' : 'danger'"
              size="small"
            >
              {{ scope.row.operationStatus || '-' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="lastOperationTime" label="操作时间" width="180" align="center">
          <template slot-scope="scope">
            <span class="time-text">
              <i class="el-icon-time" />
              {{ formatDateTime(scope.row.lastOperationTime) }}
            </span>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 分页 -->
    <div class="pagination-container">
      <el-pagination
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 50, 100]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        background
      />
    </div>
  </div>
</template>

<script>
import { getLog } from '@/api/log'
import { formatDateTime, formatTimeRange } from '@/utils/formatDay'

export default {
  name: 'OperationLog',
  data() {
    return {
      // 搜索条件
      searchLog: {
        userName: '',
        operationType: '',
        operationStatus: ''
      },
      operationTime: [],
      // 表格数据
      tableData: [],
      // 分页
      currentPage: 1,
      pageSize: 10,
      total: 0,
      // 多选
      multipleSelection: [],
      // 加载状态
      loading: false
    }
  },
  mounted() {
    this.getLogList()
  },
  methods: {
    // 获取日志列表
    // 在 getLogList 方法中修改参数名
    async getLogList() {
      this.loading = true
      try {
        const params = {
          page: this.currentPage,
          pageSize: this.pageSize
        }
        // 处理搜索条件
        if (this.searchLog.userName) {
          params.userName = this.searchLog.userName
        }
        if (this.searchLog.operationType) {
          params.operationType = this.searchLog.operationType
        }
        if (this.searchLog.operationStatus) {
          params.operationStatus = this.searchLog.operationStatus
        }
        // 使用工具类处理时间范围 - 尝试不同的参数名
        if (this.operationTime && this.operationTime.length === 2) {
          const { startTime, endTime } = formatTimeRange(this.operationTime)
          // 尝试这些参数名之一：
          params.beginTime = startTime
          params.endTime = endTime
        }
        const response = await getLog(params)
        if (response.data.code === 1) {
          this.tableData = response.data.data.rows
          this.total = response.data.data.total
        } else {
          this.$message.error(response.data.msg || '获取日志列表失败')
        }
      } catch (error) {
        console.error('获取日志列表失败:', error)
        this.$message.error('获取日志列表失败')
      } finally {
        this.loading = false
      }
    },
    // 格式化显示时间
    formatDisplayTime(time) {
      return formatDateTime(time)
    },
    // 搜索
    onSubmit() {
      this.currentPage = 1
      this.getLogList()
    },

    // 清空搜索条件
    clear() {
      this.searchLog = {
        userName: '',
        operationType: '',
        operationStatus: ''
      }
      this.operationTime = []
      this.currentPage = 1
      this.getLogList()
    },
    // 分页大小变化
    handleSizeChange(val) {
      this.pageSize = val
      this.currentPage = 1
      this.getLogList()
    },

    // 当前页变化
    handleCurrentChange(val) {
      this.currentPage = val
      this.getLogList()
    },

    // 导出数据
    exportData() {
      this.$message.info('导出功能开发中...')
    },

    // 获取操作类型颜色
    getOperationTypeColor(operationType) {
      const colorMap = {
        '新增': 'success',
        '修改': 'warning',
        '删除': 'danger',
        '查询': 'info',
        '登录': 'primary',
        '登出': 'info'
      }
      return colorMap[operationType] || 'default'
    },

    // 获取请求方法颜色
    getRequestMethodColor(operationMethod) {
      const colorMap = {
        'GET': 'info',
        'POST': 'success',
        'PUT': 'warning',
        'DELETE': 'danger'
      }
      return colorMap[operationMethod] || 'default'
    },

    // 格式化日期时间 - 替换原有的方法
    formatDateTime(dateTime) {
      return formatDateTime(dateTime)
    }
  }
}
</script>

<style scoped>
.container {
  padding: 20px;
  background-color: #f0f2f5;
  min-height: calc(100vh - 84px);
}
.search-container {
  padding: 20px;
  background-color: #fff;
  border-radius: 4px;
  margin-bottom: 20px;
}
.search-form {
  display: flex;
  flex-wrap: wrap;
  row-gap: 10px;
  align-items: center;
}
.search-form .el-form-item {
  margin-bottom: 0;
  margin-right: 15px;
}
.brand-container {
  background-color: #fff;
  padding: 20px;
  border-radius: 4px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
}
.title-container {
  font-size: 18px;
  font-weight: bold;
  color: #303133;
  display: flex;
  align-items: center;
}
.button-group-container {
  display: flex;
  gap: 10px;
  flex-grow: 1;
  margin-left: 20px;
}
.button-group-container .el-button {
  margin-right: 10px;
}
.align-right {
  margin-left: auto;
}
.total-info {
  font-size: 14px;
  color: #606266;
}
.total-info em {
  font-style: normal;
  color: #409eff;
  font-weight: bold;
}
.table-container {
  padding: 20px;
  background-color: #fff;
  border-radius: 4px;
}
.pagination-container {
  padding: 20px;
  background-color: #fff;
  border-radius: 4px;
  margin-top: 20px;
  text-align: right;
}
.url-text {
  color: #409eff;
  cursor: pointer;
}
.ip-text {
  color: #909399;
}
.time-text {
  color: #606266;
}
.time-text .el-icon-time {
  margin-right: 5px;
}
</style>

<style>
/* 暗色主题适配：仅在 body.dark-theme 下生效 */
body.dark-theme .container,
body.dark-theme .search-container,
body.dark-theme .brand-container,
body.dark-theme .table-container,
body.dark-theme .pagination-container {
  background-color: #1f1f1f !important;
  color: #fff !important;
}
body.dark-theme .el-table,
body.dark-theme .el-table th,
body.dark-theme .el-table td {
  background-color: #232323 !important;
  color: #fff !important;
}
body.dark-theme .el-table th {
  background-color: #232323 !important;
  color: #fff !important;
  border-bottom: 1px solid #444 !important;
}
body.dark-theme .el-table td {
  border-bottom: 1px solid #444 !important;
}
body.dark-theme .el-table .el-table__row:hover {
  background-color: #2b2b2b !important;
}
body.dark-theme .el-input__inner,
body.dark-theme .el-select .el-input__inner {
  background-color: #232323 !important;
  color: #fff !important;
  border-color: #444 !important;
}
body.dark-theme .el-button--primary {
  background-color: #409eff !important;
  border-color: #409eff !important;
  color: #fff !important;
}
body.dark-theme .el-button--danger {
  background-color: #f56c6c !important;
  border-color: #f56c6c !important;
  color: #fff !important;
}
body.dark-theme .el-button--success {
  background-color: #67c23a !important;
  border-color: #67c23a !important;
  color: #fff !important;
}
body.dark-theme .el-button--info {
  background-color: #909399 !important;
  border-color: #909399 !important;
  color: #fff !important;
}
body.dark-theme .el-button--warning {
  background-color: #e6a23c !important;
  border-color: #e6a23c !important;
  color: #fff !important;
}
body.dark-theme .el-pagination,
body.dark-theme .el-pagination__total,
body.dark-theme .el-pagination__jump,
body.dark-theme .el-pagination__editor,
body.dark-theme .el-pagination__sizes,
body.dark-theme .el-pagination__sizes .el-input__inner {
  background-color: #1f1f1f !important;
  color: #fff !important;
  border-color: #444 !important;
}
body.dark-theme .el-tag.el-tag--success {
  background-color: #1f1f1f !important;
  color: #67c23a !important;
  border-color: #67c23a !important;
}
body.dark-theme .el-tag.el-tag--danger {
  background-color: #1f1f1f !important;
  color: #f56c6c !important;
  border-color: #f56c6c !important;
}
body.dark-theme .el-tag.el-tag--info {
  background-color: #1f1f1f !important;
  color: #909399 !important;
  border-color: #909399 !important;
}
body.dark-theme .el-tag.el-tag--primary {
  background-color: #1f1f1f !important;
  color: #409eff !important;
  border-color: #409eff !important;
}
body.dark-theme .el-tag.el-tag--warning {
  background-color: #1f1f1f !important;
  color: #e6a23c !important;
  border-color: #e6a23c !important;
}
body.dark-theme .url-text {
  color: #409eff !important;
}
body.dark-theme .ip-text {
  color: #bbb !important;
}
body.dark-theme .time-text {
  color: #bbb !important;
}
body.dark-theme .total-info {
  color: #bbb !important;
}
body.dark-theme .total-info em {
  color: #409eff !important;
}
</style>
